<template>
  <div class="guide"></div>
</template>
<script>
export default {
  data() {
    return {
      driver: null,
      step: [
        {
          element: ".title",
          popover: {
            title: "网站标题",
            description: "点击可切换菜单栏展开与折叠",
            position: "bottom",
          },
        },
        {
          element: ".screen",
          popover: {
            title: "全屏按钮",
            description: "开启网站全屏显示",
            position: "bottom-right",
          },
        },
        {
          element: ".avatar",
          popover: {
            title: "个人中心",
            description: "点击进入个人中心",
            position: "bottom-right",
          },
        },
        {
          element: ".breadcrumb",
          popover: {
            title: "面包屑",
            description: "指示当前页面位置",
            position: "bottom",
          },
        },
      ],
    };
  },
  mounted() {
    this.driver = new this.$driver({
      className: "scoped-class", // className to wrap driver.js popover
      animate: true, // 是否开启动画
      opacity: 0.5, // 遮罩层透明度
      padding: 10, // 元素距边缘的距离
      stageBackground: "#fff",
      allowClose: false, // 禁止点击外部关闭
      overlayClickNext: false, // 点击叠加层后是否应移动下一个
      doneBtnText: "完成", // 完成按钮标题
      closeBtnText: "关闭", // 关闭按钮标题
      nextBtnText: "下一步", // 下一步按钮标题
      prevBtnText: "上一步", // 上一步按钮标题
      onNext: (ele) => {}, // 下一步
      onPrevious: (ele) => {}, // 上一步
      onHighlightStarted: (ele) => {
        // 如果当前高亮显示的为网站标题DOM，修改字体颜色为黑色
        let node = ele.node;
        if (node.className.startsWith("title")) {
          node.style.color = "#333";
        }
      }, // Called when element is about to be highlighted
      onHighlighted: (ele) => {}, // Called when element is fully highlighted
      onDeselected: (ele) => {
        // 如果刚刚离开的为网站标题DOM，修改字体颜色为白色
        let node = ele.node;
        if (node.className.startsWith("title")) {
          node.style.color = "#fff";
        }
      }, // Called when element has been deselected
      onReset: (ele) => {
        // 关闭或者完成引导调用 - 存入缓存，下次进入不主动显示引导
        localStorage.setItem("closeGuide", true);
      },
    });
    // 查看之前是否开启过引导，如果已经开启过，进入页面不主动显示引导
    let closeGuide = localStorage.getItem("closeGuide");
    // if (!closeGuide) {
    //   this.guide();
    // }
  },
  methods: {
    // 显示引导页
    guide() {
      this.driver.defineSteps(this.step);
      this.driver.start();
    },
  },
};
</script>
<style scoped>
</style>